<template>
  <div>
    <profile-sub-tabs :tabs="tabs" :default-tab="tabs[0].key" />
    <template v-for="tab in tabs">
      <div v-if="tab.key === active" :key="tab.key" class="custom-table p-x-16">
        <list-item v-for="item in spaces[active]" :key="item.id" :space="item" />
        <window-bottom-load
          :loading="loading[active]"
          :no-more="!nextPage[active]"
          @load="loadSpaces"
        />
      </div>
    </template>
  </div>
</template>

<script>
import ProfileSubTabs from '@/views/users/show/components/profile-sub-tabs';
import { formatSpacesList } from '@/components/spaces/format';
import ListItem from '@/views/spaces/index/component-spaces-list-item';
import WindowBottomLoad from '@/components/window-bottom-load';

export default {
  name: 'spaces-list',
  components: {
    ProfileSubTabs,
    ListItem,
    WindowBottomLoad,
  },
  props: {
    curTab: String,
  },
  data() {
    return {
      tabs: [
        { key: 'admin', label: '管理' },
        { key: 'collection', label: '关注' },
      ],
      spaces: {
        admin: [],
        collection: [],
      },
      loading: {
        admin: false,
        collection: false,
      },
      nextPage: {
        admin: null,
        collection: null,
      },
    };
  },
  computed: {
    userId() { return this.$route.params.userId; },
    active() { return this.$route.query.type || this.tabs[0].key; },
    // 加载空间列表所需参数
    loadSpacesParams() {
      return {
        type: this.active,
        page: this.nextPage[this.active] || 1,
        sort: 'vote',
        order: 'desc',
        userId: this.userId,
      };
    },
    loadSpacesTriggerParams() {
      return {
        curTab: this.curTab, // this=spaces
        userId: this.userId,
        type: this.active,
      };
    },
  },
  methods: {
    // 加载空间列表
    loadSpaces() {
      // 深拷贝一次，不然切得太快数据显示会有问题
      const params = JSON.parse(JSON.stringify(this.loadSpacesParams));
      this.$set(this.loading, params.type, true);
      this.$api.spaces.index(params)
        .then((res) => {
          const newList = this.spaces[params.type].concat(formatSpacesList(res.data));
          this.$set(this.spaces, [params.type], newList);
          this.$set(this.nextPage, [params.type], res.kaminari.next_page);
        })
        .catch(() => {})
        .then(() => this.$set(this.loading, params.type, false));
    },
    // 清空数据
    clearSpaces() {
      this.tabs.forEach(({ key }) => {
        this.$set(this.spaces, key, []);
        this.$set(this.nextPage, key, null);
      });
    },
  },
  watch: {
    loadSpacesTriggerParams(newVal, oldVal) {
      const userChanged = newVal.userId !== oldVal.userId; // 用户是否改变
      const isCurTab = newVal.curTab === 'spaces'; // 是否激活当前类别
      const tabIntoCur = isCurTab && (oldVal.curTab !== 'spaces'); // 从别的类型切换过来的
      const typeChanged = isCurTab && !tabIntoCur && (oldVal.type !== newVal.type); // 在当前类型下切换了子类型
      const curNoData = !(this.spaces[newVal.type] || []).length;

      if (userChanged) {
        this.clearSpaces();
        if (isCurTab) {
          this.loadSpaces();
          return;
        }
      }

      if ((tabIntoCur || typeChanged) && curNoData) {
        this.loadSpaces();
      }
    },
  },
};
</script>

<style></style>
